<!--
 * @Author: Soulmate
 * @Date: 2023-09-18 08:37:27
 * @LastEditTime: 2023-09-19 09:25:58
 * @LastEditors: Soulmate
 * @Description: 
 * @FilePath: \ruoyi-ui-vue3\src\components\EasyWordChart\index.vue
 * 版权声明
-->
<script lang="ts" setup>
import * as echarts from 'echarts';
import 'echarts-wordcloud';
type EChartsOption = echarts.EChartsOption;

const props = defineProps({
    chartData: {
        type: Object,
        default: {},
    },
});

const chart = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(() => {});

function initChart() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(chart.value);
    // 指定图表的配置项和数据
    var option = {
        series: [
            {
                type: 'wordCloud',
                shape: 'circle',
                keepAspect: false,
                // maskImage: maskImage,
                left: 'center',
                top: 'center',
                width: '100%',
                height: '90%',
                right: null,
                bottom: null,
                sizeRange: [12, 60],
                rotationRange: [-90, 90],
                rotationStep: 45,
                gridSize: 8,
                drawOutOfBound: false,
                layoutAnimation: true,
                textStyle: {
                    fontFamily: 'sans-serif',
                    fontWeight: 'bold',
                    color: function () {
                        return 'rgb(' + [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',') + ')';
                    },
                },
                emphasis: {
                    // focus: 'self',
                    textStyle: {
                        textShadowBlur: 3,
                        textShadowColor: '#333',
                    },
                },
                //data属性中的value值却大，权重就却大，展示字体就却大
                ...props.chartData,
            },
        ],
    } as EChartsOption;
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    //随着屏幕大小调节图表
    window.addEventListener('resize', () => {
        myChart.resize();
    });
}

watch(
    () => props.chartData,
    () => {
        initChart();
    },
);
</script>

<template>
    <div ref="chart" style="width: 100%; height: 250px"></div>
</template>

<style scoped></style>
